import "./index.css";
import Content from "./Content";
import DataContent from "./DataContent";
import Title from "./Title";
import { useForm } from "../../framework/common/context/metadata-context";
import { diffStyle } from "../../framework/common/utils/diffStyle";
import React, { useEffect, useRef, lazy, Suspense, useLayoutEffect } from "react";
import clsx from "clsx";
import { useSubscribe } from "../../framework/common/eventBus";
import { useUpdate } from "ahooks";
import set from "lodash/set";
import { v4 as uuid } from "uuid";
import { fieldFilter } from "../../framework/common/utils/filter";
import { Spin } from "antd";
// const DataContent = React.lazy(() => import("./DataContent"));

export default function ({ group }) {
  const metadataManager = useForm();
  const updater = useUpdate();
  const groupRef = useRef(null);
  const contentRef = useRef(null);
  const tplData = metadataManager.data;
  let content;
  //注册当前分组刷新事件
  useSubscribe(
    //子表没有id 只有code,数据比较混乱
    `group.update.${group.isSubTable ? group.code : group.id}`,
    () => {
      metadataManager.root.forceUpdate = {};
      updater();
    },
    []
  );

  useEffect(() => {
    setTimeout(() => {
      let hasContent;
      if (group.isSubTable) { //子表
        hasContent = groupRef.current?.firstChild;
      } else {
        hasContent = groupRef.current?.querySelector("table")?.firstChild?.firstChild;
      }
      if (!hasContent) {
        groupRef.current?.classList.add("hidden");
      } else {
        groupRef.current?.classList.remove("hidden");
      }
    }, 0);
  });

  //fixme:
  if (tplData?.hideInfo?.delete_group_arr?.length > 0) {
    if (tplData.hideInfo.delete_group_arr.includes(group.code || group.id)) {
      if (group.isHidden !== true) {
        group.isHidden = true;
        tplData.hideTrackingInfo.add(group);
      }
    }
  }

  if (group.isHidden === true) {
    return null;
  }

  let data;
  if (group.isSubTable) {
    //子表数据
    data = metadataManager.data.form.form_data?.children?.[group.code];
    if (data == undefined) {
      data = [];
      set(metadataManager.data.form, `form_data.children.${group.code}`, data);
    }
    // 无数据隐藏 详情页 并且 开启了无数据隐藏 并且 无数据
    if (metadataManager.isDesign != true && group.isNoDataHidden === true && (!Array.isArray(data) || data.length === 0)) {
      return null;
    }

    let anyEditable = group.columns.find((c) => c?.is_editable === true);
    //无数据隐藏 编辑页 并且 开启了无数据隐藏 并且 无数据  并且 字段都不能编辑
    if (metadataManager.isDesign === true && group.isNoDataHidden === true && (!Array.isArray(data) || data.length === 0) && anyEditable === undefined) {
      return null;
    }

    let anyShow = group.columns.find((c) => c?.is_show === true);
    //如果子表所有的字段都在步骤中设置不显示，则子表不显示
    if (anyShow === undefined) {
      return null;
    }

    data.forEach((d) => {
      if (!d.__cid__) d.__cid__ = uuid();
    });
    //data：tbody数据 group：完整的group数据
    content = <DataContent ref={contentRef} data={data} group={group}></DataContent>;
  } else {
    //主表
    content = <Content group={group} groupRef={groupRef}></Content>;
  }

  //设置分组标题样式
  let groupStyle = group?.styleData?.groupStyle;
  let groupTitleClsName = diffStyle(groupStyle, "groupStyle"); //根据分组样式规则获得className
  if (!groupTitleClsName && !groupStyle) {
    groupTitleClsName = metadataManager.groupTitleClsName; //没有自定义样式，就用全局的
  }

  return (
    <div className={clsx("group relative", metadataManager.layoutType !== 1 && "mt-3")} id={group.code} ref={groupRef}>
      {
        <Title
          data={data}
          group={group}
          groupCode={group.code}
          groupRef={groupRef}
          contentRef={contentRef}
          isSubTable={group.isSubTable}
          groupTitleClsName={groupTitleClsName}
          title={group.title || group.name}
        ></Title>
      }
      {content}
    </div>
  );
}
